<template>
	<!-- 训练营 -->
	<view>
		<view class="listBg">
			<scroll-view style="height: 100%;" :scroll-y="true" @scroll="onScroll" :scroll-with-animation="true"
				:refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onDataList"
				refresher-default-style="white" @scrolltolower="scrolltolower">
				<u-grid col="2">
					<u-grid-item v-for="(item,key) in dataList" :key="key">
						<view class="itemV" @tap="onItemClick(item)">
							<image class="itemIv" :src="item.images" mode="aspectFill"></image>
							<view class="itemTv">{{item.title}}</view>
						</view>
					</u-grid-item>
				</u-grid>
			</scroll-view>
		</view>

		<uni-popup ref="popup" type="bottom" background-color="#1F1F1F">
			<view class="popupBg">
				<view class="topV">
					<view class="titleV">
						<view @tap="onSelectClick(1)" :class="trainingPos==1?'tv1':'tv1To'">训练目标</view>
						<view @tap="onSelectClick(2)" :class="trainingPos==2?'tv2':'tv2To'">课程</view>
						<view class="tv3"></view>
						<image @tap="onClseClick" class="iv" src="../../static/public/colse.svg"></image>
					</view>
					<view v-if="trainingPos==1" class="kechengV">
						<view class="rightKCV">
							<scroll-view style="margin-bottom: 98rpx; height: 100%;" scroll-y="true"
								show-scrollbar="true">
								<view
									style="justify-content: space-around; grid-template-columns: 29% 29% 29%; display: grid; ">
									<view v-for="(data,index) in screeningBiaoList" :key="index"
										:class="data.select?'rightKCVTv2To':'rightKCVTv2'"
										@tap="onSelectBiaoClick(data)">
										{{data.name}}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view v-if="trainingPos==2" class="mendian">
						<view class="dianRightV">
							<scroll-view style="margin-bottom: 98rpx; height: 100%;" scroll-y="true"
								show-scrollbar="true">
								<view v-for="(data,index) in screeningKeList" :key="index"
									:class="data.select?'dianRightTv2To':'dianRightTv2'" @tap="onSelectKeClick(data)">
									{{data.name}}
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="bottomV">
					<view class="bt1" @tap="onResetClick">重置</view>
					<view class="bt2" @tap="onConfirmClick">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "training",
		data() {
			return {
				dataList: [],
				trainingPos: 1, //筛选 1训练目标 2课程
				screeningBiaoList: [], //筛选数据 目标
				screeningKeList: [], //筛选数据 课程
				selectBiao: [], //选择的目标
				selectKe: [], //选择的课程
				mPage: 1,
				triggered: false,
				scrollTop: 0,
			};
		},
		created() {
			this.getComboList()
			let that = this;
			uni.$on('Training', function(data) {
				if (that.screeningBiaoList.length == 0 && that.screeningKeList.length == 0) {
					that.getComboScreen()
				} else {
					that.screeningBiaoList.map((item, index) => {
						item.select = false;
						that.selectBiao.map((itemTo) => {
							if (item.id == itemTo) {
								item.select = true;
							}
						})
						return item;
					});

					that.screeningKeList.map((item, index) => {
						item.select = false;
						that.selectKe.map((itemTo) => {
							if (item.id == itemTo) {
								item.select = true;
							}
						})
						return item;
					});

					that.$refs.popup.open()
				}
			})
		},
		destroyed() {
			uni.$off('Training')
		},
		methods: {
			onClseClick() {
				this.$refs.popup.close()
			},
			onItemClick(item) {
				this.$u.route({
					url: '/pages/schedule/BootcampDetails',
					params: {
						id: item.id,
					}
				})
			},
			onDataList() {
				if (this.scrollTop == 0) {
					this.triggered = true;
					this.mPage = 1
					this.getComboList()
				}
			},
			scrolltolower() { //上拉加载
				this.mPage++
				this.getComboList()
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			getComboList() { //获取训练营列表
				let muBiao = [];

				this.selectBiao.map((item, index) => {
					if (item != 0) {
						muBiao.push(item)
					}
				});

				let keCheng = [];
				this.selectKe.map((item, index) => {
					if (item != 0) {
						keCheng.push(item)
					}
				});
				this.$api.getComboList({
					page: this.mPage,
					target_ids: muBiao.join(","),
					combo_ids: keCheng.join(",")
				}).then((res) => {
					if (this.mPage == 1) {
						this.dataList = res.list;
					} else {
						this.dataList.push(...res.list)
					}
					this.triggered = false;
				}).catch((e) => {
					this.triggered = false;
				})
			},
			onSelectClick(e) {
				this.trainingPos = e;
			},
			getComboScreen() { //获取筛选数据
				this.$api.getComboScreen({

				}).then((res) => {
					res.target_list.map((item, index) => {
						item.select = false
						return item
					});
					res.type_list.map((item, index) => {
						item.select = false
						return item
					});
					let data = {
						id: 0,
						name: "全部",
						select: true
					}
					let data2 = {
						id: 0,
						name: "全部",
						select: true
					}
					this.selectBiao.push(0);
					this.screeningBiaoList = [];
					this.screeningBiaoList.push(data);
					this.screeningBiaoList.push(...res.target_list);

					this.selectKe.push(0);
					this.screeningKeList = [];
					this.screeningKeList.push(data2);
					this.screeningKeList.push(...res.type_list);

					this.$refs.popup.open()
				}).catch((e) => {})
			},
			onSelectBiaoClick(item) {
				if (item.id == 0) { //点击了全部
					this.screeningBiaoList.map((items, index) => {
						items.select = false;
					});
					let isSele = item.select;
					item.select = !isSele;
				} else {
					this.screeningBiaoList.map((items, index) => {
						if (items.id == 0) {
							items.select = false;
						}
					});

					let isSele = item.select;
					item.select = !isSele;
				}
			},
			onSelectKeClick(item) {
				if (item.id == 0) { //点击了全部
					this.screeningKeList.map((items, index) => {
						items.select = false;
					});
					let isSele = item.select;
					item.select = !isSele;
				} else {
					this.screeningKeList.map((items, index) => {
						if (items.id == 0) {
							items.select = false;
						}
					});

					let isSele = item.select;
					item.select = !isSele;
				}
			},
			onResetClick() {
				this.selectBiao = []
				this.screeningBiaoList.map((items, index) => {
					if (items.id == 0) {
						items.select = true;
						this.selectBiao.push(items.id)
					} else {
						items.select = false;
					}
				});

				this.selectKe = []
				this.screeningKeList.map((items, index) => {
					if (items.id == 0) {
						items.select = true;
						this.selectKe.push(items.id)
					} else {
						items.select = false;
					}
				});

				this.$refs.popup.close()
				this.getComboList()
			},
			onConfirmClick() {
				this.selectBiao = []
				this.selectKe = []

				this.screeningBiaoList.map((items, index) => {
					if (items.select) {
						this.selectBiao.push(items.id);
					}
				});
				this.screeningKeList.map((items, index) => {
					if (items.select) {
						this.selectKe.push(items.id);
					}
				});

				this.$refs.popup.close()
				this.getComboList()
			}
		}
	}
</script>

<style lang="scss">
	.listBg {
		height: 81vh;
		.itemV {
			width: 90%;
			background: #1F1F1F;
			border-radius: 10rpx;
			height: 280rpx;
			margin-bottom: 30rpx;

			.itemIv {
				width: 100%;
				height: 200rpx;
				background-color: antiquewhite;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
			}

			.itemTv {
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				color: #E8E8E8;
				display: block;
				white-space: nowrap;
				/* 过长部分不换行 */
				text-overflow: ellipsis;
				/* 过长部分展示省略号 */
				overflow: hidden;
				/* 隐藏过长部分 */
				margin-top: 10rpx;
			}
		}

	}

	.popupBg {
		height: 645rpx;

		.topV {
			height: 547rpx;

			.titleV {
				display: flex;
				margin-top: 30rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;

				.tv1 {
					color: #CEF743;
					font-size: 32rpx;
					padding-bottom: 15rpx;
					box-sizing: border-box;
					border-bottom: 5rpx solid #CEF743;
					margin-right: 30rpx;
				}

				.tv1To {
					color: #8D8D8D;
					font-size: 32rpx;
					padding-bottom: 15rpx;
					box-sizing: border-box;
					border-bottom: 5rpx solid #00000000;
					margin-right: 30rpx;
				}

				.tv2 {
					color: #CEF743;
					font-size: 32rpx;
					padding-bottom: 15rpx;
					box-sizing: border-box;
					border-bottom: 5rpx solid #CEF743;
				}

				.tv2To {
					color: #8D8D8D;
					font-size: 32rpx;
					padding-bottom: 15rpx;
					box-sizing: border-box;
					border-bottom: 5rpx solid #00000000;
				}

				.tv3 {
					flex: 1;
				}

				.iv {
					width: 42rpx;
					height: 42rpx;
				}
			}

			.kechengV {
				display: flex;
				height: 440rpx;
				margin-top: 30rpx;
				box-sizing: border-box;

				.rightKCV {
					flex: 1;

					.rightKCVTv2 {
						width: 100%;
						height: 80rpx;
						background: #3D3F3E;
						border-radius: 10rpx;
						margin-bottom: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #939393;
						border: 1rpx solid #00000000;
					}

					.rightKCVTv2To {
						width: 100%;
						height: 80rpx;
						background: rgba(206, 247, 67, 0.2);
						border-radius: 10rpx;
						margin-bottom: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #CEF743;
						border: 1rpx solid #CEF743;
					}
				}
			}

			.mendian {
				display: flex;
				height: 440rpx;
				margin-top: 30rpx;
				box-sizing: border-box;

				.dianRightV {
					flex: 1;

					.dianRightTv2 {
						margin-left: 30rpx;
						margin-right: 30rpx;
						height: 60rpx;
						background: #3D3F3E;
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #939393;
						border: 1rpx solid #00000000;
					}

					.dianRightTv2To {
						margin-left: 30rpx;
						margin-right: 30rpx;
						height: 60rpx;
						background: rgba(206, 247, 67, 0.2);
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #CEF743;
						border: 1rpx solid #CEF743;
					}


				}
			}
		}


		.bottomV {
			display: flex;
			height: 98rpx;

			.bt1 {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				background: #3D3F3E;
				color: #939393;
				font-size: 32rpx;
			}

			.bt2 {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				background: #CEF743;
				color: #333333;
				font-size: 32rpx;
			}
		}
	}
</style>
